@import '../../styles/default.less';
@import '../../styles//theme/base.less';

// 组件比较简单，样式直接照搬了 arco-desgin 的样式，懒得写了

@divider-margin-horizontal: @spacing-6;
@divider-margin-vertical: @spacing-8;
@divider-margin-vertical_text: @spacing-8;
@divider-margin-text: @spacing-7;
@divider-position-text-left: @spacing-9;
@divider-position-text-right: @spacing-9;
@divider-font-size: @font-size-body-3;
@divider-font-weight: @font-weight-500;

@divider-size: 1px;
@divider-line-style: @border-solid;
@divider-color-bg: @color-gray-3;
@divider-color-text: @color-gray-10;

.divider {
  &-horizontal {
    position: relative;
    clear: both;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: @spacing-8 0;
    border-bottom: @divider-size @divider-line-style @divider-color-bg;

    &.divider-with-text {
      display: flex;
      align-items: center;
      margin: @divider-margin-vertical_text 0;
      border-bottom-width: 0;

      &::before,
      &::after {
        flex: 1;
        height: 0;
        border-bottom: @divider-size @divider-line-style;
        border-bottom-color: inherit;
        content: '';
      }
    }

    &.divider-with-text-left:before {
      flex-basis: @divider-position-text-left;
      flex-grow: 0;
    }

    &.divider-with-text-right:after {
      flex-basis: @divider-position-text-right;
      flex-grow: 0;
    }
  }

  &-vertical {
    display: inline-block;
    min-width: 1px;
    max-width: 1px;
    height: 1em;
    margin: 0 @divider-margin-horizontal;
    vertical-align: middle;
    border-left: @divider-size @divider-line-style @divider-color-bg;
  }

  // 仅水平分割线才支持文字，只考虑水平情况
  &-text {
    box-sizing: border-box;
    padding: 0 @divider-margin-text;
    color: @divider-color-text;
    font-weight: @divider-font-weight;
    font-size: @divider-font-size;
    line-height: 2;
  }
}
